document.addEventListener('DOMContentLoaded', () => {
    const $container = document.querySelector("#container-box");
    const $list = document.querySelector('#list');
    const $contextMenu = document.querySelector('#context-menu');
    let popperInstance = null;
    const hm = new Hammer($list);
    let activeId = null;
    const hideMenu = () => {
        $contextMenu.removeAttribute('data-show');
        popperInstance = null;
        requestAnimationFrame(() => {
            $container.classList.remove("not-scroll");
        });
        hm.off('tap')
    };
    $list.addEventListener("touchmove", hideMenu);
    hm.on('press', (event) => {
        $container.classList.add("not-scroll");
        const target = event.target;
        activeId = target.id;
        console.log(`当前点击项id为：${target}`);
        popperInstance = Popper.createPopper(event.target, $contextMenu, {
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [0, 8],
                },
              },
            ],
        });
        $contextMenu.setAttribute('data-show', '');
        popperInstance.update();
        hm.on("tap", hideMenu);
    });
    $contextMenu.addEventListener('click', (event) => {
        const target = event.target;
        const action = target.getAttribute('data-action');
        const text = target.innerText;
        hideMenu();
        alert(`
            触发当前菜单显示的聊天记录为${$list.querySelector(`#${activeId}`).innerText},
            当前点击的菜单项内容是${text},
            点击之后要调用的函数名为${action}
        `);
    });
    window.addEventListener('scroll', hideMenu);
});
